<template>
  <div class="UserPage">
    <NavBar></NavBar>
    <div class="main">
      <div class="left">
        <UserInfoCard :userInfoCard="userInfo"></UserInfoCard>
        <div class="card" :key="index" v-for="(itemCard, index) in cards">
          <div class="card-header">{{ itemCard.cardHeader }}</div>
          <div class="card-time">{{ itemCard.cardTime }}</div>
          <div class="card-conter">{{ itemCard.cardContent }}</div>
        </div>
      </div>
      <HotList></HotList>
    </div>
  </div>
</template>

<script>
import NavBar from "../components/NavBar.vue";
import HotList from "../components/HotList.vue";
// 用户信息卡片
import UserInfoCard from "../components/UserInfoCard.vue";
export default {
  components: { NavBar, HotList, UserInfoCard },
  data() {
    return {
      userInfo: [
        {
          bGimgUrl: require("../image/user-bg.png"),
          headPortrait: require("../image/headPortrait.png"),
          userName: "用户名",
          userPresent: "这个人没有简介~~",
          statistics: [{follow: 1, fans: 7, praise: 104}],
        },
      ],
      cards: [
        {
          cardHeader: "卡片信息标题",
          cardTime: "2021-11-19",
          cardContent: "信息列",
        },
        {
          cardHeader: "卡片信息标题",
          cardTime: "2021-11-19",
          cardContent: "信息列",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.UserPage {
  background: #f0f2f5;
  /* 取消横向滚动条 */
  overflow-x: hidden;
}
// 选中文字颜色
.user-blue {
  color: #409eff;
}
.main {
  display: flex;
  justify-content: center;
  margin: 22px 0 100px;
}

.card {
  margin-top: 22px;
  padding: 20px;
  height: 350px;
  width: 600px;
  background: #fff;
  border-radius: 8px;
}
.card:hover {
  box-shadow: 0 0 6px rgb(0 0 0 / 10%);
}

.card-header {
  font-size: 20px;
  border-bottom: 1px solid #f0f2f5;
}
.card-time {
  margin-top: 4px;
  font-size: 14px;
  color: #a1a1a6;
}
.card-conter {
  margin-top: 10px;
  font-size: 16px;
}
</style>